<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>简单网络页面</title>
    <!-- 引入Tailwind CSS -->
    <script src="https://cdn.tailwindcss.com"></script>
    <!-- 引入Font Awesome -->
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
    
    <!-- 配置Tailwind自定义颜色和字体 -->
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#3B82F6',
                        secondary: '#10B981',
                        accent: '#8B5CF6',
                        dark: '#1F2937',
                    },
                    fontFamily: {
                        sans: ['Inter', 'system-ui', 'sans-serif'],
                    },
                }
            }
        }
    </script>
    
    <!-- 自定义工具类 -->
    <style type="text/tailwindcss">
        @layer utilities {
            .content-auto {
                content-visibility: auto;
            }
            .text-shadow {
                text-shadow: 0 2px 4px rgba(0,0,0,0.1);
            }
            .transition-custom {
                transition: all 0.3s ease;
            }
        }
    </style>
</head>
<body class="font-sans text-gray-800 bg-gray-50">
    <!-- 导航栏 -->
    <header id="navbar" class="fixed w-full bg-white/90 backdrop-blur-sm shadow-sm z-50 transition-custom">
        <div class="container mx-auto px-4 sm:px-6 lg:px-8">
            <div class="flex justify-between items-center py-4">
                <div class="flex items-center">
                    <a href="#" class="text-2xl font-bold text-primary flex items-center">
                        <i class="fa fa-globe mr-2"></i>
                        <span>WebSite</span>
                    </a>
                </div>
                
                <!-- 桌面导航 -->
                <nav class="hidden md:flex space-x-8">
                    <a href="#home" class="text-gray-700 hover:text-primary transition-custom font-medium">首页</a>
                    <a href="#features" class="text-gray-700 hover:text-primary transition-custom font-medium">特色</a>
                    <a href="#about" class="text-gray-700 hover:text-primary transition-custom font-medium">关于</a>
                    <a href="#contact" class="text-gray-700 hover:text-primary transition-custom font-medium">联系我们</a>
                </nav>
                
                <!-- 移动端菜单按钮 -->
                <button id="menu-toggle" class="md:hidden text-gray-700 focus:outline-none">
                    <i class="fa fa-bars text-xl"></i>
                </button>
            </div>
            
            <!-- 移动端导航菜单 -->
            <div id="mobile-menu" class="md:hidden hidden pb-4">
                <div class="flex flex-col space-y-3">
                    <a href="#home" class="text-gray-700 hover:text-primary transition-custom font-medium">首页</a>
                    <a href="#features" class="text-gray-700 hover:text-primary transition-custom font-medium">特色</a>
                    <a href="#about" class="text-gray-700 hover:text-primary transition-custom font-medium">关于</a>
                    <a href="#contact" class="text-gray-700 hover:text-primary transition-custom font-medium">联系我们</a>
                </div>
            </div>
        </div>
    </header>

    <!-- 主要内容 -->
    <main>
        <!-- 英雄区域 -->
        <section id="home" class="pt-28 pb-20 bg-gradient-to-br from-blue-50 to-indigo-50">
            <div class="container mx-auto px-4 sm:px-6 lg:px-8">
                <div class="flex flex-col md:flex-row items-center">
                    <div class="md:w-1/2 mb-10 md:mb-0">
                        <h1 class="text-[clamp(2rem,5vw,3.5rem)] font-bold text-dark leading-tight text-shadow">
                            欢迎来到我们的<br>
                            <span class="text-primary">简单网站</span>
                        </h1>
                        <p class="mt-6 text-lg text-gray-600 max-w-lg">
                            这是一个使用现代Web技术构建的简单页面，展示了基础的网站结构和设计元素。
                        </p>
                        <div class="mt-8 flex space-x-4">
                            <a href="#features" class="px-6 py-3 bg-primary text-white rounded-lg shadow-md hover:bg-primary/90 transition-custom font-medium">
                                了解更多
                            </a>
                            <a href="#contact" class="px-6 py-3 bg-white text-primary border border-primary rounded-lg shadow-sm hover:bg-gray-50 transition-custom font-medium">
                                联系我们
                            </a>
                        </div>
                    </div>
                    <div class="md:w-1/2">
                        <img src="https://picsum.photos/600/400" alt="网站展示图" class="rounded-xl shadow-lg w-full h-auto object-cover transform hover:scale-[1.02] transition-custom">
                    </div>
                </div>
            </div>
        </section>
        
        <!-- 特色区域 -->
        <section id="features" class="py-20 bg-white">
            <div class="container mx-auto px-4 sm:px-6 lg:px-8">
                <div class="text-center mb-16">
                    <h2 class="text-[clamp(1.8rem,4vw,2.5rem)] font-bold text-dark">我们的特色</h2>
                    <p class="mt-4 text-gray-600 max-w-2xl mx-auto">探索我们网站的主要功能和特色，体验简洁而强大的用户体验</p>
                </div>
                
                <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
                    <!-- 特色1 -->
                    <div class="bg-gray-50 rounded-xl p-8 shadow-sm hover:shadow-md transition-custom border border-gray-100">
                        <div class="w-14 h-14 bg-blue-100 rounded-full flex items-center justify-center mb-6">
                            <i class="fa fa-bolt text-primary text-2xl"></i>
                        </div>
                        <h3 class="text-xl font-bold mb-3">快速加载</h3>
                        <p class="text-gray-600">我们的网站经过优化，确保快速加载速度，提供流畅的用户体验。</p>
                    </div>
                    
                    <!-- 特色2 -->
                    <div class="bg-gray-50 rounded-xl p-8 shadow-sm hover:shadow-md transition-custom border border-gray-100">
                        <div class="w-14 h-14 bg-green-100 rounded-full flex items-center justify-center mb-6">
                            <i class="fa fa-mobile text-secondary text-2xl"></i>
                        </div>
                        <h3 class="text-xl font-bold mb-3">响应式设计</h3>
                        <p class="text-gray-600">完美适配各种设备屏幕，从手机到桌面电脑都能提供一致的体验。</p>
                    </div>
                    
                    <!-- 特色3 -->
                    <div class="bg-gray-50 rounded-xl p-8 shadow-sm hover:shadow-md transition-custom border border-gray-100">
                        <div class="w-14 h-14 bg-purple-100 rounded-full flex items-center justify-center mb-6">
                            <i class="fa fa-shield text-accent text-2xl"></i>
                        </div>
                        <h3 class="text-xl font-bold mb-3">安全可靠</h3>
                        <p class="text-gray-600">采用最新的安全技术，保护您的数据和隐私，让您使用更放心。</p>
                    </div>
                </div>
            </div>
        </section>
        
        <!-- 关于我们 -->
        <section id="about" class="py-20 bg-gray-50">
            <div class="container mx-auto px-4 sm:px-6 lg:px-8">
                <div class="flex flex-col md:flex-row items-center gap-12">
                    <div class="md:w-1/2">
                        <img src="https://picsum.photos/500/500" alt="关于我们" class="rounded-xl shadow-lg w-full h-auto object-cover">
                    </div>
                    <div class="md:w-1/2">
                        <h2 class="text-[clamp(1.8rem,4vw,2.5rem)] font-bold text-dark">关于我们</h2>
                        <p class="mt-4 text-gray-600">
                            我们是一个专注于创建高质量Web体验的团队，致力于使用最新的技术和最佳实践来构建直观、高效的网站。
                        </p>
                        <p class="mt-4 text-gray-600">
                            自成立以来，我们已经为众多客户提供了优质的Web解决方案，帮助他们在数字世界中取得成功。
                        </p>
                        <div class="mt-8 grid grid-cols-2 gap-4">
                            <div class="flex items-center">
                                <div class="text-3xl font-bold text-primary mr-2">50+</div>
                                <div class="text-gray-600">完成项目</div>
                            </div>
                            <div class="flex items-center">
                                <div class="text-3xl font-bold text-primary mr-2">30+</div>
                                <div class="text-gray-600">满意客户</div>
                            </div>
                            <div class="flex items-center">
                                <div class="text-3xl font-bold text-primary mr-2">10+</div>
                                <div class="text-gray-600">专业团队</div>
                            </div>
                            <div class="flex items-center">
                                <div class="text-3xl font-bold text-primary mr-2">5+</div>
                                <div class="text-gray-600">行业经验</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
        
        <!-- 联系我们 -->
        <section id="contact" class="py-20 bg-white">
            <div class="container mx-auto px-4 sm:px-6 lg:px-8">
                <div class="text-center mb-16">
                    <h2 class="text-[clamp(1.8rem,4vw,2.5rem)] font-bold text-dark">联系我们</h2>
                    <p class="mt-4 text-gray-600 max-w-2xl mx-auto">有任何问题或建议？请随时与我们联系，我们会尽快回复您</p>
                </div>
                
                <div class="max-w-4xl mx-auto">
                    <div class="bg-gray-50 rounded-xl p-8 shadow-sm border border-gray-100">
                        <form id="contact-form" class="space-y-6">
                            <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                                <div>
                                    <label for="name" class="block text-gray-700 font-medium mb-2">姓名</label>
                                    <input type="text" id="name" name="name" class="w-full px-4 py-3 rounded-lg border border-gray-300 focus:ring-2 focus:ring-primary focus:border-primary transition-custom" placeholder="请输入您的姓名" required>
                                </div>
                                <div>
                                    <label for="email" class="block text-gray-700 font-medium mb-2">邮箱</label>
                                    <input type="email" id="email" name="email" class="w-full px-4 py-3 rounded-lg border border-gray-300 focus:ring-2 focus:ring-primary focus:border-primary transition-custom" placeholder="请输入您的邮箱" required>
                                </div>
                            </div>
                            <div>
                                <label for="subject" class="block text-gray-700 font-medium mb-2">主题</label>
                                <input type="text" id="subject" name="subject" class="w-full px-4 py-3 rounded-lg border border-gray-300 focus:ring-2 focus:ring-primary focus:border-primary transition-custom" placeholder="请输入主题" required>
                            </div>
                            <div>
                                <label for="message" class="block text-gray-700 font-medium mb-2">留言</label>
                                <textarea id="message" name="message" rows="5" class="w-full px-4 py-3 rounded-lg border border-gray-300 focus:ring-2 focus:ring-primary focus:border-primary transition-custom" placeholder="请输入您的留言内容" required></textarea>
                            </div>
                            <div>
                                <button type="submit" class="w-full px-6 py-3 bg-primary text-white rounded-lg shadow-md hover:bg-primary/90 transition-custom font-medium">
                                    发送留言
                                </button>
                            </div>
                        </form>
                    </div>
                    
                    <div class="mt-12 grid grid-cols-1 md:grid-cols-3 gap-8 text-center">
                        <div class="p-6">
                            <div class="w-12 h-12 bg-blue-100 rounded-full flex items-center justify-center mx-auto mb-4">
                                <i class="fa fa-map-marker text-primary"></i>
                            </div>
                            <h3 class="font-bold mb-2">地址</h3>
                            <p class="text-gray-600">北京市朝阳区XX街道XX号</p>
                        </div>
                        <div class="p-6">
                            <div class="w-12 h-12 bg-blue-100 rounded-full flex items-center justify-center mx-auto mb-4">
                                <i class="fa fa-phone text-primary"></i>
                            </div>
                            <h3 class="font-bold mb-2">电话</h3>
                            <p class="text-gray-600">+86 123 4567 8910</p>
                        </div>
                        <div class="p-6">
                            <div class="w-12 h-12 bg-blue-100 rounded-full flex items-center justify-center mx-auto mb-4">
                                <i class="fa fa-envelope text-primary"></i>
                            </div>
                            <h3 class="font-bold mb-2">邮箱</h3>
                            <p class="text-gray-600">info@example.com</p>
                        </div>
                    </div>
                </div>
            </div>
        </section>
    </main>

    <!-- 页脚 -->
    <footer class="bg-dark text-white py-12">
        <div class="container mx-auto px-4 sm:px-6 lg:px-8">
            <div class="grid grid-cols-1 md:grid-cols-4 gap-8">
                <div>
                    <h3 class="text-xl font-bold mb-4 flex items-center">
                        <i class="fa fa-globe mr-2"></i> WebSite
                    </h3>
                    <p class="text-gray-400">
                        提供高质量的Web解决方案，创造卓越的用户体验。
                    </p>
                    <div class="mt-6 flex space-x-4">
                        <a href="#" class="text-gray-400 hover:text-white transition-custom">
                            <i class="fa fa-facebook"></i>
                        </a>
                        <a href="#" class="text-gray-400 hover:text-white transition-custom">
                            <i class="fa fa-twitter"></i>
                        </a>
                        <a href="#" class="text-gray-400 hover:text-white transition-custom">
                            <i class="fa fa-instagram"></i>
                        </a>
                        <a href="#" class="text-gray-400 hover:text-white transition-custom">
                            <i class="fa fa-linkedin"></i>
                        </a>
                    </div>
                </div>
                
                <div>
                    <h4 class="text-lg font-semibold mb-4">快速链接</h4>
                    <ul class="space-y-2">
                        <li><a href="#home" class="text-gray-400 hover:text-white transition-custom">首页</a></li>
                        <li><a href="#features" class="text-gray-400 hover:text-white transition-custom">特色</a></li>
                        <li><a href="#about" class="text-gray-400 hover:text-white transition-custom">关于我们</a></li>
                        <li><a href="#contact" class="text-gray-400 hover:text-white transition-custom">联系我们</a></li>
                    </ul>
                </div>
                
                <div>
                    <h4 class="text-lg font-semibold mb-4">服务</h4>
                    <ul class="space-y-2">
                        <li><a href="#" class="text-gray-400 hover:text-white transition-custom">网站设计</a></li>
                        <li><a href="#" class="text-gray-400 hover:text-white transition-custom">开发服务</a></li>
                        <li><a href="#" class="text-gray-400 hover:text-white transition-custom">SEO优化</a></li>
                        <li><a href="#" class="text-gray-400 hover:text-white transition-custom">维护支持</a></li>
                    </ul>
                </div>
                
                <div>
                    <h4 class="text-lg font-semibold mb-4">订阅</h4>
                    <p class="text-gray-400 mb-4">订阅我们的新闻通讯，获取最新资讯</p>
                    <form class="flex">
                        <input type="email" placeholder="您的邮箱" class="px-4 py-2 rounded-l-lg w-full focus:outline-none text-gray-800">
                        <button type="submit" class="bg-primary hover:bg-primary/90 transition-custom px-4 py-2 rounded-r-lg">
                            <i class="fa fa-paper-plane"></i>
                        </button>
                    </form>
                </div>
            </div>
            
            <div class="border-t border-gray-800 mt-12 pt-8 text-center text-gray-400">
                <p>&copy; 2023 WebSite. 保留所有权利。</p>
            </div>
        </div>
    </footer>

    <!-- 返回顶部按钮 -->
    <button id="back-to-top" class="fixed bottom-6 right-6 bg-primary text-white w-12 h-12 rounded-full flex items-center justify-center shadow-lg opacity-0 invisible transition-custom hover:bg-primary/90">
        <i class="fa fa-arrow-up"></i>
    </button>

    <!-- JavaScript -->
    <script>
        // 移动端菜单切换
        const menuToggle = document.getElementById('menu-toggle');
        const mobileMenu = document.getElementById('mobile-menu');
        
        menuToggle.addEventListener('click', () => {
            mobileMenu.classList.toggle('hidden');
        });
        
        // 导航栏滚动效果
        const navbar = document.getElementById('navbar');
        
        window.addEventListener('scroll', () => {
            if (window.scrollY > 50) {
                navbar.classList.add('py-2', 'shadow');
                navbar.classList.remove('py-4');
            } else {
                navbar.classList.add('py-4');
                navbar.classList.remove('py-2', 'shadow');
            }
        });
        
        // 返回顶部按钮
        const backToTopButton = document.getElementById('back-to-top');
        
        window.addEventListener('scroll', () => {
            if (window.scrollY > 300) {
                backToTopButton.classList.remove('opacity-0', 'invisible');
                backToTopButton.classList.add('opacity-100', 'visible');
            } else {
                backToTopButton.classList.add('opacity-0', 'invisible');
                backToTopButton.classList.remove('opacity-100', 'visible');
            }
        });
        
        backToTopButton.addEventListener('click', () => {
            window.scrollTo({
                top: 0,
                behavior: 'smooth'
            });
        });
        
        // 平滑滚动
        document.querySelectorAll('a[href^="#"]').forEach(anchor => {
            anchor.addEventListener('click', function (e) {
                e.preventDefault();
                
                // 关闭移动菜单（如果打开）
                if (!mobileMenu.classList.contains('hidden')) {
                    mobileMenu.classList.add('hidden');
                }
                
                document.querySelector(this.getAttribute('href')).scrollIntoView({
                    behavior: 'smooth'
                });
            });
        });
        
        // 表单提交处理
        const contactForm = document.getElementById('contact-form');
        
        contactForm.addEventListener('submit', (e) => {
            e.preventDefault();
            
            // 简单的表单验证和提交处理
            const formData = new FormData(contactForm);
            const formValues = Object.fromEntries(formData.entries());
            
            // 在实际应用中，这里会发送数据到服务器
            console.log('表单数据:', formValues);
            
            // 显示成功消息
            alert('留言发送成功！我们会尽快回复您。');
            contactForm.reset();
        });
    </script>
</body>
</html>
